<template>
<!-- 我的推广 -->
	<view>
		<view class='my-promotion'>
			<view class="header">
				<view class='name acea-row row-center-wrapper'>
					<view class="f13">
						<!-- 当前佣金 -->
						{{i18n.user_page.user_spread_user.t1}}
					</view>
					<navigator url='/pages/users/user_commission_info/index?type=佣金转入余额' hover-class="none" class='record f12'>
						<!-- 转入余额记录 -->
						{{i18n.user_page.user_spread_user.t12}}
						<text class='iconfont icon-xiangyou'></text>
					</navigator>
				</view>
				<view class="num">
					<span>{{ commission || 0 }}</span>
				</view>
			</view>
			<!-- #ifdef APP-PLUS || H5 -->
			<navigator url="/pages/lottery/integralExchange/integralExchange?active=1" hover-class="none"
				class='bnt f12' style="background-color: #999">
				<!-- 转入余额 -->
				{{i18n.user_page.user_spread_user.t13}}
			</navigator>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<view @click="openSubscribe('/pages/lottery/integralExchange/integralExchange?active=1')"
				class='bnt f12' style="background-color: #999">
				<!-- 转入余额 -->
				{{i18n.user_page.user_spread_user.t13}}
			</view>
			<!-- #endif -->
			
			<view class='list acea-row row-between-wrapper'>
				<text class="f12" style="padding: 24upx 0; color: #E93323;width: 100%;">
					<!-- 推广链接：前面的路径后面添加?current=1&code={{commissionCode}}点击复制按钮 -->
					{{i18n.user_page.user_spread_user.t14}}{{commissionCode}}
					<view class="px-1 m-1" style="display: inline-block;">
						<button @click="copy()" style="width: 195rpx;height: 60rpx;background-color: #e93323" class="text-light cu-btn round">Click Copy</button>
					</view>
				</text>

				<!-- <navigator url='/pages/users/user_spread_code/index' hover-class="none" class='item acea-row row-center-wrapper row-column'>
					<text class='iconfont icon-erweima'></text>
				<view>
				
						{{i18n.user_page.user_spread_user.t6}}
					</view>
				</navigator> -->
				<navigator url='/pages/users/promoter-list/index' hover-class="none" class='item acea-row row-center-wrapper row-column'>
					<!-- <text class='iconfont icon-tongji'></text> -->
					<view class="qdz-img yuanb-img">
						<image src="/static/img/yuanb22.png" mode="widthFix"></image>
					</view>
					<view class="f12">
						<!-- 推广人统计 -->
						{{i18n.user_page.user_spread_user.t7}}
					</view>
					
				</navigator>
				<navigator url="/pages/users/user_commission_info/index?type=佣金分成" hover-class="none" class='item acea-row row-center-wrapper row-column'>
					<!-- <text class='iconfont icon-qiandai'></text> -->
					<view class="qdz-img">
						<image src="/static/img/qdaizi22.png" mode="widthFix"></image>
					</view>
					<view class="qdz-fz">
						<!-- 佣金明细 -->
						{{i18n.user_page.user_spread_user.t8}}
					</view>
					
				</navigator>
				<!-- <navigator url='/pages/users/promoter-order/index' hover-class="none" class='item acea-row row-center-wrapper row-column'>
					<text class='iconfont icon-dingdan'></text>
					<view>推广人订单</view>
				</navigator>
				<navigator url='/pages/users/promoter_rank/index' hover-class="none" class='item acea-row row-center-wrapper row-column'>
					<text class='iconfont icon-paihang1'></text>
					<view>推广人排行</view>
				</navigator>
				<navigator url='/pages/users/commission_rank/index' hover-class="none" class='item acea-row row-center-wrapper row-column'>
					<text class='iconfont icon-paihang'></text>
					<view>佣金排行</view>
				</navigator> -->
			</view>
		</view>
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
		<home></home>
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue'
	import {
		getSpreadInfo
	} from '@/api/user.js';
	import {
		getUserInfo
	} from '@/api/lottery.js';
	import {
		getCommissionInfo
	} from '@/api/commission.js';
	import {
		openExtrctSubscribe
	} from '@/utils/SubscribeMessage.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home,
		},
		data() {
			return {
				commission: '',
				commissionCode: '',
				spreadInfo: [],
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		computed: {
			i18n() {
				return this.$t("index")
			},
			...mapGetters(['isLogin'])
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.user_page.t24
			});
		},
		onShow() {
			this.getUserInfo();
		},
		onLoad() {
			if (this.isLogin) {
				//this.getSpreadInfo();
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
			}
		},
		methods: {
			onLoadFun: function() {
				this.getSpreadInfo();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			openSubscribe: function(page) {
				uni.showLoading({
					title: this.i18n.common.loading  // '正在加载',
				})
				openExtrctSubscribe().then(res => {
					uni.hideLoading();
					uni.navigateTo({
						url: page,
					});
				}).catch(() => {
					uni.hideLoading();
				});
			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
					that.commission = (res.commission / 100).toFixed(2);
					this.commissionCode = res.commission_code;
				});
			},
			copy: function() {
				uni.setClipboardData({
				  data: 'https://www.tascoshopping.com/#/pages/users/login/index?current=1&code=' + this.commissionCode,//要被复制的内容
				  success:()=>{
				    uni.showToast({
				      title:'copy success'
				    })
				  }
				});
			}
			/**
			 * 获取个人用户信息
			 */
			// getSpreadInfo: function() {
			// 	let that = this;
			// 	getCommissionInfo().then(res => {
			// 		this.commission = res.commission;
			// 		this.commissionCode = res.commissionCode;
			// 		this.spreadInfo = res.commissionInfo;
			// 		//that.$set(that,'spreadInfo',res.data);
			// 	});
			// }
		}
	}
</script>

<style scoped lang="scss">
@import "@/common/font.css";
	.pic {
		font-size: 32rpx;
		color: #fff;
	}

	.pic-font {
		font-size: 78rpx;
		color: #fff;
	}

	.my-promotion .header {
		background-color: #E93323;
		// background-image: url("");
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		// width: 100%;
		height: 375rpx;
		border-radius: 12rpx;
    	margin: 20upx 20upx 20upx;
	}

	.my-promotion .header .name {
		font-size: 30rpx;
		color: #fff;
		// padding-top: 57rpx;
		position: relative;
		display: flex;
    	justify-content: space-between;
     	padding: 57rpx 20upx 0;
	}

	.my-promotion .header .name .record {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		position: absolute;
		right: 20rpx;
	}

	.my-promotion .header .name .record .iconfont {
		font-size: 25rpx;
		margin-left: 10rpx;
		vertical-align: 2rpx;
	}

	.my-promotion .header .num {
		text-align: center;
		color: #fff;
		margin-top: 28rpx;
		font-size: 90rpx;
		font-family: 'Guildford Pro';
	}

	.my-promotion .header .profit {
		padding: 0 20rpx;
		margin-top: 35rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.my-promotion .header .profit .item {
		min-width: 200rpx;
		text-align: center;
	}

	.my-promotion .header .profit .item .money {
		font-size: 34rpx;
		color: #fff;
		margin-top: 5rpx;
	}

	.my-promotion .bnt {
		font-size: 26rpx;
		color: #fff;
		// width: 258rpx;
		width: 50%;
		height: 68rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 68rpx;
		// margin: -32rpx auto 0 auto;
		margin: 32rpx auto 0 auto;
	}

	.my-promotion .list {
		padding: 0 20rpx 50rpx 20rpx;
		margin-top: 10rpx;
	}

	.my-promotion .list .item {
		width: 345rpx;
		height: 240rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #666;
	}

	.my-promotion .list .item .iconfont {
		font-size: 70rpx;
		background-image: linear-gradient(to right, #fc4d3d 0%, #e93323 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-bottom: 20rpx;
	}

	.qdz-img{
		width: 80upx;
	}
	.qdz-fz{
		font-size: 24rpx;
	}
	.yuanb-img{
		width: 66upx;
	}
</style>
